<template>
	<view>
		<view class='header'>
			<image src='/static/public/WeChat.png'></image>
		</view>
		<view class='content'>
			<view>申请获取以下权限</view>
			<text>获得你的公开信息(昵称，头像、地区等)</text>
		</view>
		<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
			授权登录
		</button>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
                SessionKey: '',
				nickname: '',
				avatar: '',
			}
		},
		methods: {
            // 获取授权
			wxGetUserInfo() {
				const self = this;
				
				// 获取授权用户信息
				uni.getUserInfo({ provider: 'weixin',success: function(infoRes) {
					const nickname = infoRes.userInfo.nickName; // 昵称
					const avatar = infoRes.userInfo.avatarUrl; // 头像
					const sex = infoRes.userInfo.gender; // 性别
						
					// 微信小程序获取用户登录凭证（有效期五分钟）
					uni.login({ provider: 'weixin', success: function(loginRes) {
							
						const code = loginRes.code;
						// 获取本地缓存的邀请UID
						const invite = uni.getStorageSync('invite');
						// 请求数据
						self.$u.api.open.wxOauth({ code: code, 
							nickname: nickname, 
							avatar: avatar,
							sex: sex,
							invite: invite }).then((res) => {
							// 保存令牌
							self.$u.vuex('vuex_token', res.token);
							self.$u.vuex('vuex_user', res.info);

							// 信息更新成功后跳转到小程序首页
							uni.reLaunch({
								url: '/pages/index/index'
							});
						})
					}});
				}});
				
				
				
			}
        }
	}
</script>

<style lang="scss">
	.header {
        margin: 90rpx 0 90rpx 50rpx;
        border-bottom: 1px solid #cccccc;
        text-align: center;
        width: 650rpx;
        height: 300rpx;
        line-height: 450rpx;
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
    }

    .content {
        margin-left: 50rpx;
        margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 40rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
    }
</style>